<template>
  <scroll-view
    class="scroll-list"
    scroll-y
    refresher-default-style="none"
    :refresher-enabled="refresherEnabled"
    :refresher-background="background"
    :refresher-triggered="triggered"
    :refresher-threshold="refresherThreshold"
    :lower-threshold="lowerThreshold"
    @refresherpulling="onPulling"
    @refresherrefresh="onRefresh"
    @refresherabort="onAbort"
    @refresherrestore="onStore"
    @scrolltolower="onScrolltolower"
    @scrolltoupper="onScrolltoupper"
    @scroll="scroll"
    :scroll-top="scrollTop"
    :scroll-with-animation="true"
    :scroll-into-view="scrollIntoView"
  >
    <view class="no-data-wrapper" v-if="loadComplete && list.length === 0">
      <u-empty mode="order" text="暂无数据" textSize="12" textColor="#999999">
      </u-empty>
    </view>
    <view class="top-loading" v-if="triggered">
      <u-loadmore
        status="loading"
        loadingText="正在加载..."
        fontSize="12"
        color="#999999"
      />
    </view>
    <slot></slot>
    <view class="bottom-loading" v-if="loading || noMore">
      <u-loadmore
        :status="loading ? `loading` : `nomore`"
        loadingText="努力加载中..."
        nomoreText="页面到底了，没有更多数据了～"
        height="60rpx"
        fontSize="12"
        color="#999999"
        v-if="loading || noMore"
      />
    </view>
  </scroll-view>
</template>

<script>
export default {
  name: "scrollList",
  props: {
    list: {
      type: Array,
      default() {
        return [];
      },
    },
    refresherEnabled: {
      type: Boolean,
      default: !1,
    },
    background: {
      type: String,
      default: "transparent",
    },
    lowerThreshold: {
      type: Number | String,
      default: 200,
    },
    refresherThreshold: {
      type: Number | String,
      default: 50,
    },
    scrollIntoView: {
      type: String,
      default: "",
    },
    loadComplete: {
      type: Boolean,
      default: !1,
    },
  },
  data() {
    return {
      triggered: false,
      loading: false,
      noMore: false,
      timer: null,
      ms: 1000,
      showRefreshSuccessful: false,
      scrollTop: 0,
      oldScrollTop: 0,
    };
  },
  methods: {
    onPulling(e) {},
    onStore() {},
    onScrolltoupper() {
      // #ifdef MP-QQ
      this.timer = new Date();
      if (this._freshing) return;
      this._freshing = true;
      this.triggered = true;
      this.$emit("pullDownRefresh");
      // #endif
    },
    onRefresh() {
      this.timer = new Date();
      if (this._freshing) return;
      this._freshing = true;
      this.triggered = true;
      this.$emit("pullDownRefresh");
    },
    // 滚动到底
    onScrolltolower() {
      if (this.noMore) return;
      if (this._loading) return;
      this._loading = true;
      this.loading = true;
      this.$emit("pullUpLoad");
    },
    onAbort() {
      this.pullDownDone();
      console.log("pullUpLoad");
    },

    pullDownDone() {
      const currentDate = new Date();
      const t = currentDate - this.timer;
      console.log(currentDate, this.timer);
      console.log(t, "sadasd");
      if (t < this.ms) {
        setTimeout(() => {
          this.triggered = false;
          this._freshing = false;
          this.noMore = false;
          //this.showSuccess()
        }, this.ms - t);
      } else {
        this.triggered = false;
        this._freshing = false;
        this.noMore = false;
        //this.showRefreshSuccessful = false;
      }
    },
    pullUpDone(flag = false) {
      this.loading = false;
      this._loading = false;
      if (flag) {
        this.noMore = true;
      } else {
        this.noMore = false;
      }
    },
    hideMore() {
      this.noMore = false;
    },
    showSuccess() {
      // if(this.showRefreshSuccessful) return;
      this.showRefreshSuccessful = true;
      setTimeout(() => {
        this.showRefreshSuccessful = false;
      }, 2000);
    },
    //监听滚动
    scroll(e) {
      if (e.detail.scrollTop > this.systemInfo.windowHeight) {
        this.$parent.isTop = !0;
      } else {
        this.$parent.isTop = !1;
      }
      this.oldScrollTop = e.detail.scrollTop;
      this.$emit("pageScroll", e);
    },
  },
};
</script>

<style lang="scss" scoped>
.scroll-list {
  position: relative;
  height: 100%;

  .no-data-wrapper {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -80%);
    position: absolute;
  }

  .top-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    margin-top: -40rpx;
    .text {
      color: #fff;
      font-size: 24rpx;
    }
  }
  .bottom-loading {
    padding-bottom: calc(env(safe-area-inset-bottom) / 2);
  }
}
</style>
